<template>
<tele-modal :dialogVisible.sync="visible" class="login" @closed="$emit('closed')">
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="登录" name="first">
      <ps-login @login-success="handlogin" :login-visible.sync="loginVisible" @im-registe="$emit('im-registe')" @forgetps="$emit('forgetps')"></ps-login>
    </el-tab-pane>
    <el-tab-pane label="短信登录" name="second">
      <sms-login @login-success="handlogin" @im-registe="$emit('im-registe')"></sms-login>
    </el-tab-pane>
  </el-tabs>
</tele-modal>
</template>

<script>
import { autoLogin } from './autologin'
import Cookies from 'js-cookie'

import TeleModal from '../TeleModal'
import PsLogin from './PsLogin'
import SmsLogin from './SmsLogin'

export default {
  components: {
    TeleModal,
    PsLogin,
    SmsLogin
  },
  title: '登陆',
  name: 'login',
  props: {
    loginVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      phone: '',
      password: '',
      repassword: '',
      vernum: '', // 验证码
      activeName: 'first',
      checked: false
    }
  },
  mounted() {
    this.visible = this.loginVisible
    this.login()
  },
  methods: {
    handleClick() {},
    login() {
      // 自动登录
      // if (this.$getUrlCompileParames('name') && this.$getUrlCompileParames('password')) {
      //   this.userName = this.$getUrlCompileParames('name')
      //   this.password = this.$getUrlCompileParames('password')
      // }
      // if (Cookies.get('checked') && !Cookies.get('userinfo')) {
      if (Cookies.get('checked') === '1' && !localStorage.userinfo) {
        autoLogin({
          userName: localStorage.username,
          password: localStorage.password
          // userName: Cookies.get('username'),
          // password: Cookies.get('password')
        }).then((res) => {
          if (res.data.code === 1) {
            this.$store.commit('setUser', res.data.data)
            // 登陆成功后要做的事情
          }
        }).catch((error) => {})
      }
    },
    handlogin(data) {
      this.$emit('login-success', data)
    }
  },
  watch: {
    'loginVisible' (val) {
      this.visible = this.loginVisible
    },
    'visible' (val) {
        if (!val) {
          this.$emit('update:loginVisible', false)
        }
      }
  }
}
</script>
<style>
.login .el-tabs__nav {
  width: 100%;
}

.login .el-tabs__active-bar {
  height: 0;
}

.login-warning {
  background: #F6EBEA;
  color: #C05A5A;
  text-align: left;
  margin: 0;
  padding: 9px 50px;
  margin: 0 -50px;
  margin-bottom: 8px;
}

.login-warning a {
  color: #C05A5A;
}

.login .el-tabs__header {
  position: static;
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
}

.login .el-tabs__item {
  font-size: 18px;
  height: auto;
  line-height: 1;
}

.login #tab-first {
  border-right: 2px solid #BFBFBF;
}

.login .el-tabs__nav-wrap::after {
  height: 0;
}

.login .el-tabs__nav-wrap {
  position: static;
}

.login .el-tabs__item:hover {
  color: #94C05A;
}

.login .el-tabs__item.is-active {
  color: #94C05A;
}

/* 密码登陆底部功能 */

.login-func,
.login-func .el-button {
  color: #497D03;
}

.login-func button {
  padding: 0;
}
</style>
